<template>
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell v-for="(item,index) in list" :key="index">
      <template #title>
        <van-skeleton :row="2" :loading="skeletonLoading">
          <Item :data="item" />
        </van-skeleton>
      </template>
    </van-cell>
  </van-list>
</template>

<script>
import { getCinemaList } from '@/api/cinemaApi'

import Item from './Item.vue'
export default {
  components: {
    Item
  },
  data() {
    return {
      list: [],
      skeletonLoading: true,
      loading: false,
      finished: false,
      page: 1
    }
  },
  methods: {
    // 用到了vant-list组件，滚动就是触发此事件
    async onLoad() {
      let ret = await getCinemaList(this.page)
      // 判断服务器返回的数据是否已经没有了
      if (ret.data.cinemas.length > 0) {
        this.list.push(...ret.data.cinemas)
        // 加载状态结束
        this.loading = false
        this.skeletonLoading = false
      } else {
        // 数据全部加载完成
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
